<script setup>
import { h } from "vue";
import { ElMessageBox } from "element-plus";
import closeImg from "@/assets/images/red-close.png";
import promptWarn from "@/assets/images/prompt_warn.png";
const emit = defineEmits(["confirm", "cancal"]);
const props = defineProps({
  title: {
    type: String,
    default: "提示",
  },
  type: {
    type: String,
    default: "danger",
  },
  leftBtnTxt: {
    type: String,
    default: "取消",
  },
  rightBtnTxt: {
    type: String,
    default: "禁用",
  },
  content: {
    type: String,
    default: "",
  },
  showCancelButton: {
    type: Boolean,
    default: true,
  },
  confirmButtonClass: {
    type: String,
    default: "confirmButtonClass",
  },
  cancelButtonClass: {
    type: String,
    default: "",
  },
});
const open = () => {
  ElMessageBox({
    title: props.title,
    message: h(
      "div",
      {
        style: "display: flex;align-items: center;",
      },
      [
        h("img", {
          style: "width:30px;height:30px;margin-left:24px",
          src: props.type == "danger" ? closeImg : promptWarn,
        }),
        h(
          "span",
          {
            style:
              "margin-left:16px; font-size: 14px;color: #313233; font-weight: 500;",
          },
          props.content
        ),
      ]
    ),
    showCancelButton: props.showCancelButton,
    confirmButtonText: props.rightBtnTxt,
    cancelButtonText: props.leftBtnTxt,
    cancelButtonClass: props.cancelButtonClass,
    confirmButtonClass: props.confirmButtonClass,
    closeOnClickModal: false,
    customClass: "messageCustomClass",
  })
    .then(() => {
      emit("confirm");
    })
    .catch(() => {
      emit("cancal");
    });
};
defineExpose({ open });
</script>
<template>
  <div></div>
</template>
<style lang="less" scoped></style>
